import React from "react";
import classNames from 'classnames'

interface baseProps {
    className?: string,
    disabled?: boolean,
    size?: buttonSize,
    btnType?: buttonType,
    children: React.ReactNode,
    href?: string
}



//设置联合类型， 用于绑定 
type NativeButtonProps = baseProps &  React.ButtonHTMLAttributes<HTMLElement>;
type AnchorButtonProps = baseProps &  React.AnchorHTMLAttributes<HTMLElement>;
export type ButttonProps = Partial<NativeButtonProps & AnchorButtonProps>;



const Button: React.FC<ButttonProps> = (props) => {
    const {
        children,
        disabled,
        size,
        btnType,
        href,
        className,
        ...restProps
    } = props;
    const classes = classNames('btn', className, {
        [`btn-${btnType}`]: btnType,
        [`btn-${size}`]: size,
        'disabled': (btnType === buttonType.Link) && disabled
    });

    if (btnType === buttonType.Link && href) {
        return (
            <a
            {...restProps}
            className={classes}
            href={href}
            >
                {children}
            </a>)

    } else {
        return (
            <button
            {...restProps}
            className={classes}
            disabled={disabled}
            >
                {children}
            </button>
        )
    }

}

export enum buttonSize {
    Lagre = 'lg',
    Small = 'sm',
}

export enum buttonType {
    Primary = 'primary',
    Defalut = 'defalut',
    Danger = "danger",
    Link = "link",
}

Button.defaultProps = {
    disabled: false,
    btnType: buttonType.Defalut
}


export default Button;
